const path = require("path");
const webpack = require("webpack");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
// const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
const CopyWebpackPlugin = require("copy-webpack-plugin");

var devMode = true;

var dirname = path.resolve(__dirname);

module.exports = {
	mode: "development",
	entry: {
		index: path.join(dirname, "src/index.js"),
		pownerwseditor: path.join(dirname, "src/components/PowerWsEditor.js"),
	},
	output: {
		filename: "[name].js",
		// publicPath: "/static/powernet/dist", //写入到index.html资源文件的根目录
		path: path.join(dirname, "dist"), //生成的文件放到的目录
	},
	plugins: [
		new CleanWebpackPlugin(),
		new MiniCssExtractPlugin({
			filename: devMode ? "[name].css" : "[name].[hash].css",
			chunkFilename: devMode ? "[id].css" : "[id].[hash].css",
		}),
		new HtmlWebpackPlugin({
			title: "PowerNetEditor",
			template: "src/index.html",
			excludeChunks: ["pownerwseditor"],
			hash: true,
		}),
		new webpack.ProvidePlugin({
			$: "jquery",
			jQuery: "jquery",
			"window.$": "jquery",
			"window.jQuery": "jquery",
			Popper: ["popper.js", "default"],
			L: "leaflet/dist/leaflet-src.esm",
			// bsCustomFileInput: 'mdbootstrap/js/modules/bs-custom-file-input'
		}),
	],
	module: {
		rules: [
			{
				test: /\.js$/,
				exclude: /node_modules/,
				loader: "babel-loader",
				query: { compact: false },
			},
			{
				test: /\.css$/,
				use: [
					{
						loader: MiniCssExtractPlugin.loader,
						options: {
							// 这里可以指定一个 publicPath
							// 默认使用 webpackOptions.output中的publicPath
							// publicPath: "./dist",
						},
					},
					"css-loader",
				],
			},
			// {
			// 	test: /\.css$/,
			// 	use: ["style-loader", "css-loader"],
			// },
			{
				test: /\.less$/,
				// use: ["style-loader", "css-loader", "less-loader"],
				use: [{ loader: MiniCssExtractPlugin.loader }, "css-loader", "less-loader"],
			},
			// {
			// 	test: require.resolve('jquery'),
			// 	loader: "expose-loader?jQuery!expose-loader?$"
			// },
			{
				test: /\.(png|svg|jpg|gif)$/,
				use: [
					{
						loader: "url-loader",
						options: {
							// 这里的options选项参数可以定义多大的图片转换为base64
							name: "[name].[ext]",
							limit: 50000, // 表示小于50kb的图片转为base64,大于50kb的是路径
							outputPath: "images", //定义输出的图片文件夹
						},
					},
					{
						//压缩图片要在file-loader之后使用
						loader: "image-webpack-loader",
						options: {
							bypassOnDebug: true,
						},
					},
				],
			},
			{ test: /\.eot/, loader: "file-loader?prefix=font/" },
			{ test: /\.woff/, loader: "file-loader?prefix=font/&limit=10000&mimetype=application/font-woff" },
			{ test: /\.ttf/, loader: "file-loader?prefix=font/" },
			{ test: /\.svg/, loader: "file-loader?prefix=font/" },
		],
	},
	devtool: "inline-source-map",
	devServer: {
		contentBase: "/static/powernet/dist",
		proxy: {
			"/static": {
				target: "http://localhost:7001",
				changeOrigin: true,
			},
		},
		port: 8090,
	},
};
